<!--
	作者：1055471363@qq.com
	时间：2017-12-12
	描述：批次当前信息查询
-->
<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>批次当前信息查询</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.css" />
		<script type="text/javascript" src="../../js/jquery.min.js"></script>
		<script type="text/javascript" src="../../js/jquery.mobile-1.4.5.min.js"></script>
		<script type="text/javascript" src="../../base.js"></script>
		<style>
			.mui-bar {
				background-color: #0088BB;
			}
			
			.mui-title {
				color: #FFFFFF
			}
			
			a {
				color: #FFFFFF
			}
			.ui-table-columntoggle-btn {
				display: none !important;
			}
			
			tr {
				border-bottom: 1px solid #d6d6d6;
			}
			
			th {
				border-bottom: 1px solid #d6d6d6;
			}
			
			tr:nth-child(even) {
				background: #e9e9e9;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" id="curLotsTable">
			<header class="mui-bar mui-bar-nav" id="user">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">批次当前信息查询{{name}}</h1>
			</header>

			<div data-role="main" class="ui-content">
				<!--<div class="mui-input-row">-->
				<label>LOT ID:</label>
				<input ref="input" id="inputId" type="text" @keyup="keyup" class="mui-input-clear" placeholder="请扫描批次条码">
				<!--</div>-->
				<div class="mui-row">
					<ul class="mui-table-view" style="margin-top: 10px;">
						<li class="mui-table-view-cell mui-media">
							<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow">
								<thead>
									<tr>
										<th>批次号</th>
										<td>{{items.LotId}}</td>
									</tr>
									<tr>
										<th>当前状态</th>
										<td>{{items.LotStatus}}</td>
									</tr>
									<tr>
										<th>开始数量</th>
										<td>{{items.TotalQty}}</td>
									</tr>
									<tr>
										<th>结束数量</th>
										<td>{{items.DoneQty}}</td>
									</tr>
									<tr>
										<th>作业人员</th>
										<td>{{items.owner}}</td>
									</tr>
									<tr>
										<th>作业设备</th>
										<td>{{items.EqpId}}</td>
									</tr>
								</thead>
								<tbody>

								</tbody>
							</table>
						</li>
						<li class="mui-table-view-cell" v-show="DiagramUrl == true">
							<!--id="weldings"-->
							<a class="mui-navigate-right" href="#" v-on:click="open1">
								<p>焊线图：<span>{{items.Diagram}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>焊线图版本：</span><span>{{items.DiagramVersion}}</span></p>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<!--<ul class="mui-table-view" style="margin-top: 10px;">
				<li class="mui-table-view-cell mui-media">
					<table>
						<tr>
							<td>
								<p>BuyOff：<span id="hid">{{items.owner}}</span></p>
							</td>
						</tr>
					</table>

				</li>
			</ul>-->
		</div>
		<!--</div>-->
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			})

			/**自动聚焦start**/
			var nativeWebview, imm, InputMethodManager;
			var initNativeObjects = function() {
				if(mui.os.android) {
					var main = plus.android.runtimeMainActivity();
					var Context = plus.android.importClass("android.content.Context");
					InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
					imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
				} else {
					nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
				}
			};
			//			var showSoftInput = function() {
			//				if(mui.os.android) {
			//					imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
			//				} else {
			//					nativeWebview.plusCallMethod({
			//						"setKeyboardDisplayRequiresUserAction": false
			//					});
			//				}
			//				setTimeout(function() {
			//					var inputElem = document.querySelector('input');
			//					inputElem.focus();
			//					inputElem.parentNode.classList.add('mui-active'); //第一个是search，加上激活样式
			//				}, 1);
			//			};
			var showSoftInput = function() {
				var nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
				if(mui.os.android) {
					//强制当前webview获得焦点
					plus.android.importClass(nativeWebview);
					nativeWebview.requestFocus();
					imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
				} else {
					nativeWebview.plusCallMethod({
						"setKeyboardDisplayRequiresUserAction": false
					});
				}
				setTimeout(function() {
					//此处可写具体逻辑设置获取焦点的input
					var inputElem = document.querySelector('input');
					inputElem.focus();
					//					document.activeElement.blur();
				}, 1);
			};

			mui.plusReady(function() {
				initNativeObjects();
				showSoftInput();
				/**  
				 * 关闭软键盘 B5教程网 
				 */
				//				document.activeElement.blur();
			});

			/**自动聚焦end**/
			var user = localStorage.getItem("user");
			var app = new Vue({
				el: '#user',
				data: {
					name: "(" + user + ")"
				}
			})
			var vm = new Vue({
				el: '#curLotsTable',
				data: {
					//					banner: {}, //顶部工号数据
					items: [], //table信息流数据
					lotId: "",
					DiagramUrl: false
				},
				mounted: function() {
					this.searchLotInfo();
				},
				methods: {
					open1: function() {
						window.open('welding.html');
					},
					keyup(e) {
						if(e === null || e.keyCode === 13) {
							var _this = this;
							localStorage.setItem("lotId", e.target.value);
							//							mui.ajax('../../json/searchLotInfo.json', {
							mui.ajax(base + '/searchLotInfo.json', {
								data: {
									LotId: e.target.value
								},
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 30000, //超时时间设置为10秒；
								async: true,
								success: function(data) {
									//关闭软键盘
									document.activeElement.blur();
									_this.items = data
									var Diagram = data.Diagram
									if(Diagram === undefined) {
										_this.DiagramUrl = false
									} else {

										_this.DiagramUrl = true

										var DiagramVersion = data.DiagramVersion
										localStorage.setItem("DiagramUrl", Diagram);

										localStorage.setItem("DiagramVersion", DiagramVersion);
									}
									//清空文本
									e.target.value = '';

								},
								error: function(xhr, type, errorThrown) {
									mui.toast("网络异常");
								}
							});　
						}

					},
					searchLotInfo: function() {
						var _this = this;
						var lotId = localStorage.getItem("lotId");
						//						mui.ajax('../../json/searchLotInfo.json', {
						mui.ajax(base + '/searchLotInfo.json', {
							data: {
								LotId: lotId
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 30000, //超时时间设置为10秒；
							async: true,
							success: function(data) {

								_this.items = data
								var Diagram = data.Diagram
								if(Diagram === undefined) {
									console.log("没有焊线图")
									_this.DiagramUrl = false
								} else {
									_this.DiagramUrl = true
									//									var DiagramUrl = data.Diagram
									var DiagramVersion = data.DiagramVersion
									localStorage.setItem("DiagramUrl", Diagram);
									localStorage.setItem("DiagramVersion", DiagramVersion);
								}

							},
							error: function(xhr, type, errorThrown) {
								console.log("网络异常");
							}
						});
					}
				}
			})

			document.onkeydown = function(e) { //对整个页面文档监听
				var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
				//判断如果用户按下了回车键（keycody=13）
				//console.log("keyNum:"+keyNum);
				if(keyNum == 119) {
					document.getElementById("inputId").focus();
				}
			}
		</script>
	</body>

</html>